// 创建翻译结果显示框
let translationBox = null;

function createTranslationBox() {
    const box = document.createElement('div');
    box.id = 'paddle-translation-box';
    box.style.cssText = `
        position: fixed;
        z-index: 10000;
        background: white;
        border: 2px solid #667eea;
        border-radius: 8px;
        padding: 12px;
        max-width: 300px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 14px;
        display: none;
    `;
    document.body.appendChild(box);
    return box;
}

function showTranslation(text, x, y) {
    if (!translationBox) {
        translationBox = createTranslationBox();
    }
    
    translationBox.innerHTML = `
        <div style="display: flex; align-items: center; margin-bottom: 8px;">
            <span style="color: #667eea; font-weight: bold;">🚀 飞桨翻译</span>
            <span style="margin-left: auto; cursor: pointer; color: #999;" onclick="this.parentElement.parentElement.style.display='none'">✕</span>
        </div>
        <div style="color: #666; margin-bottom: 8px; font-size: 12px;">原文: ${text}</div>
        <div style="color: #333; font-weight: 500;">翻译中...</div>
    `;
    
    translationBox.style.left = x + 'px';
    translationBox.style.top = y + 'px';
    translationBox.style.display = 'block';
    
    return translationBox;
}

// 监听来自background script的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'translate') {
        const selection = window.getSelection();
        const range = selection.getRangeAt(0);
        const rect = range.getBoundingClientRect();
        
        const box = showTranslation(request.text, rect.left + window.scrollX, rect.bottom + window.scrollY + 5);
        
        // 发送翻译请求
        chrome.runtime.sendMessage({action: "translateText", text: request.text}, function(response) {
            const translationDiv = box.querySelector('div:last-child');
            translationDiv.textContent = response.translatedText;
        });
    }
});

// 双击翻译功能
document.addEventListener('dblclick', function(e) {
    const selection = window.getSelection();
    const selectedText = selection.toString().trim();
    
    if (selectedText && /^[a-zA-Z\s.,!?]+$/.test(selectedText)) {
        const range = selection.getRangeAt(0);
        const rect = range.getBoundingClientRect();
        
        const box = showTranslation(selectedText, rect.left + window.scrollX, rect.bottom + window.scrollY + 5);
        
        chrome.runtime.sendMessage({action: "translateText", text: selectedText}, function(response) {
            const translationDiv = box.querySelector('div:last-child');
            translationDiv.textContent = response.translatedText;
        });
    }
});

// 点击其他地方隐藏翻译框
document.addEventListener('click', function(e) {
    if (translationBox && !translationBox.contains(e.target)) {
        translationBox.style.display = 'none';
    }
});

// 添加翻译整个网页的功能
function translatePage() {
    const elements = document.querySelectorAll('h1, h2, h3, h4, h5, h6, p, li, td, th, button');
    elements.forEach(element => {
        if (element.innerText.trim() && !/[^\u0000-\u007F]/.test(element.innerText)) {
            chrome.runtime.sendMessage({
                action: "translateText",
                text: element.innerText
            }, function(response) {
                if (response && response.translatedText) {
                    element.setAttribute('data-original-text', element.innerText);
                    element.innerText = response.translatedText;
                }
            });
        }
    });
}

// 监听来自popup的翻译整页消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'translatePage') {
        translatePage();
        sendResponse({status: 'started'});
    }
});